<template>
	<view style="position: relative;">
		<view class="chatList" :style="{height:height+'px'}">
			<view style="width: 100%;margin: 20rpx 0;" v-for="item in list" :key="item.uid">
				<view class="chat-left" v-if="item.type==='2'">
					<img class="avatar" :src="doctorInfo.personalImg" alt="">
					<view class="chat-left-msg">
						<view class="chat-msg">
							{{item.msgContent}}
						</view>
						<view class="chat-time">
							{{item.createTime}}
						</view>
					</view>
				</view>
				<view class="chat-right" v-if="item.type==='1'">
					<view class="chat-right-msg">
						<view class="chat-msg">
							{{item.msgContent}}
						</view>
						<view class="chat-time">
							{{item.createTime}}
						</view>
					</view>
					<img class="avatar" :src="member.avatarUrl" alt="">
				</view>
			</view>
		</view>
		<view class="sendList">
			<uni-easyinput v-model="problemDetails" placeholder="请输入问题" @confirm="send">
        <template #right>
            <button style="margin: 10rpx;" @click="send" type="primary" size="mini">发送</button>
        	</template>
      </uni-easyinput>
		</view>
		<uni-popup ref="popup" background-color="#fff">
			<view class="popup-content">
				<view class="popup-item">
					<text>昵称</text>
					<input class="nickname" type="nickname" :value="member.memberName" @blur="bindblur"
						placeholder="点击获取微信昵称" />
				</view>
				<view class="popup-item">
					<text>头像</text>
					<image :src="member.avatarUrl" class="avatar-img"></image>
					<button class="avatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						点击获取微信头像
					</button>
				</view>
			</view>
			<button type="success" @click="close">关闭</button>
		</uni-popup>
	</view>
</template>

<script>
	import * as chat from '../../common/api/chat.js'
	export default {
		data() {
			return {
				problemDetails: '',
				member: {
					avatarUrl: uni.getStorageSync('avatarUrl'),
					memberId: uni.getStorageSync('openid_key')
				},
				doctorInfo: {},
				height: 0,
				// avatarUrl: '',
				list: []
			}
		},
		onLoad(e) {
			// this.doctorInfo = JSON.parse(e.info)
      this.doctorInfo=getApp().globalData.expertInfo
		},
		onShow() {
			const { windowHeight } = uni.getSystemInfoSync(); // 获取页面高度
			this.height = (windowHeight - 68)
			// this.member.memberId = uni.getStorageSync('openid_key')
			// if (uni.getStorageSync('memberName')) {
			// 	this.member.memberName = uni.getStorageSync('memberName')
			// 	//this.$refs.popup.open('top')
				this.getList()
			// } else {
			// 	this.$refs.popup.open('top')
			// }
		},
		methods: {
			getList() {
        let param ={}
        if(!this.doctorInfo.memberId){
          //从专家库进入时
          if (!this.member.memberId) {
          	return false
          }
          param.memberId=this.member.memberId
          param.expertId=this.doctorInfo.uid
        }else{
          //从消息进入时
          param.memberId=this.doctorInfo.memberId
          param.expertId=this.doctorInfo.expertId
        }
				
				chat.queryByPage(param).then(res => {
					this.list = res.data.data.rows
					this.$refs.popup.close()
				}).catch(error => {
					console.log(error)
				})
			},
			bindblur(e) {
				this.member.memberName = e.detail.value
				//将更改的昵称上传给接口
			},
			onChooseAvatar(e) {
				// 转 base 64格式
				uni.getFileSystemManager().readFile({
					filePath: e.detail.avatarUrl,
					encoding: 'base64',
					success: r => {
						this.member.avatarUrl = `data:image/bmp;base64,${r.data}`
						uni.setStorageSync('avatarUrl', this.member.avatarUrl)
					},
					fail: (err) => {
						uni.hideLoading()
					}
				});
			},
			close() {
				uni.setStorageSync('memberName', this.member.memberName)
				this.getList()
				// uni.navigateBack({
				// 	// 关闭当前页面，返回上一页面或多级页面
				// 	delta:1
				// });
			},
			send() {
        //默认是从专家库进入
				let param = {
					memberId: this.member.memberId,
					author: this.member.memberName,
					problemDetails: this.problemDetails,
					expertId: this.doctorInfo.uid,
					expertName: this.doctorInfo.name
				}
        if(this.doctorInfo.memberId){
          //从消息进入时,修改4个参数
          param.memberId=this.doctorInfo.memberId
          param.author=this.doctorInfo.memberName
          param.expertId=this.doctorInfo.expertId
          param.expertName=this.doctorInfo.expertName
        }
        
				chat.insert(param).then(result => {
					this.problemDetails = ''
					this.getList()
				}).catch(error => {
					console.log(error)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.chatList {
		width: 730rpx;
		padding: 10rpx;
		background: #eee;
	}

	.sendList {
		width: 710rpx;
		position: fixed;
		bottom: 16rpx;
		padding: 20rpx;
	}

	.popup-content {
		padding: 50rpx;
	}

	.popup-item {
		display: flex;
		gap: 30rpx;
		align-items: center;
		margin: 40rpx 0;
	}

	.avatar-img {
		width: 80rpx;
		height: 80rpx;
		border: 1px solid #eee;
	}

	.avatar {
		font-size: 28rpx;
		margin-left: 0;
	}

	.chat-left {
		display: flex;
		width: 730rpx;
		gap: 20rpx;

		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius:40rpx;
		}

		.chat-left-msg {
			.chat-msg {
				position: relative;
			}

			.chat-msg::before {
				position: absolute;
				content: '';
				width: 20rpx;
				height: 20rpx;
				background: #fff;
				transform: rotate(45deg);
				left: -10rpx;
				top: 28rpx;
			}
		}
	}



	.chat-right {
		display: flex;
		justify-content: flex-end;
		gap: 20rpx;
		width: 730rpx;

		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius:40rpx;
		}

		.chat-right-msg {
			.chat-msg {
				position: relative;
			}

			.chat-msg::before {
				position: absolute;
				content: '';
				width: 20rpx;
				height: 20rpx;
				background: #fff;
				transform: rotate(45deg);
				right: -10rpx;
				top: 28rpx;
			}
		}
	}

	.chat-msg {
		max-width: 400rpx;
		padding: 20rpx;
		background: #fff;
		border-radius: 10rpx;
	}

	.chat-time {
		font-size: 24rpx;
		color: #888;
	}
</style>